<template>
	<view class="productFooter">
		<view class="input" >
			<input type="text" placeholder="写评论…" placeholder-class="input_placeholder" ref='commentInput'  @focus="footerFocus" :style="{width:onlyShare?'618rpx':''}" />
			<image src="/static/svg/xpl.svg" mode="" class="xpl"></image>
		</view>
		<view class="xiaoxi" v-if="!onlyShare" @tap="toAllComment">
			<text v-if="message.discussNumber">{{message.discussNumber>999?'999+':message.discussNumber}}</text>
			<image src="/static/svg/xiaoxi2222222.svg" mode=""></image>
		</view>
		<image :src="message.zan==0?praised:praise" mode="" v-if="!onlyShare" @tap="toPraise"></image>
		<image :src="message.collection==0?loved:love" mode="" v-if="!onlyShare" @tap="toCollect"></image>
		<image src="/static/svg/zf.svg" mode="" :style="{marginLeft:onlyShare?'31rpx':''}" @tap='toshare'></image>
		<commentInput v-if='inputShow' @blur='commentInputBlur' @submit='commentInputSubmit' :value1='value'/>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import commentInput from "@/components/comment/commentInput.vue"
	export default {
		components: {commentInput},
		props: {
			onlyShare: {
				type:Boolean,
				default:false
			},
			isInDetail: {
				type:Boolean,
				default:false
			},
			isInAllComment: {
				type:Boolean,
				default:false
			},
			isInput: {
				type:Boolean,
				default:false
			},
			message: {
				type:Object,
				default(){
				    return {}
				}
			},
		},
		mounted() {
			this.$nextTick(()=>{
				if(this.isInput){
					this.$refs.commentInput.$refs.input.focus()
				}
			})
		},
		data() {
			return {
				value:"",
				inputShow:false,
				love:require('@/static/svg/love222222.svg'),
				loved:require('@/static/svg/love2223.svg'),
				praise:require('@/static/svg/zanzna.svg'),
				praised:require('@/static/svg/dianzan111.svg'),
			};
		},
		methods:{
			footerFocus(){
				if(this.isInAllComment||this.onlyShare){
					this.inputShow=true
				}else{
					if(this.message.designId){
						localStorage.setItem("designMessage",JSON.stringify(this.message))
						uni.navigateTo({
							url: '/pages/homeDesign/allComment?id='+this.message.designId+"&state="+1+"&isInput=true"
						})
					}else if(this.message.softId){
						localStorage.setItem("designMessage",JSON.stringify(this.message))
						uni.navigateTo({
							url: '/pages/homeDesign/allComment?id='+this.message.softId+"&state="+2+"&isInput=true"
						})
					}else if(this.message.fineId){
						localStorage.setItem("designMessage",JSON.stringify(this.message))
						uni.navigateTo({
							url: '/pages/homeDesign/allComment?id='+this.message.fineId+"&state="+3+"&isInput=true"
						})
					}
				}
				
			},
			commentInputBlur(value){
				this.inputShow=false
				this.value=value
			},
			commentInputSubmit(value){
				this.$emit("submit",value)
				this.inputShow=false
				this.value=""
			},
			async toPraise(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.userId=localStorage.getItem("userId")
				if(this.message.designId){
					data.designId=this.message.designId
					data.category=1
				}else if(this.message.softId){
					data.softId=this.message.softId
					data.category=2
				}else if(this.message.fineId){
					data.fineId=this.message.fineId
					data.category=3
				}
				data.state=1
				let res
				if(this.message.zan!=0){
					if(this.message.designId){
						res=await urls.setFabulous(data)
					}else if(this.message.softId){
						res=await urls.softfabulous(data)
					}else if(this.message.fineId){
						res=await urls.fineArtfabulous(data)
					}
					if(res.code==0){
						this.$emit('praise',true)
					}
				}else{
					if(this.message.designId){
						res=await urls.reduceZan(data)
					}else if(this.message.softId){
						res=await urls.softreduceZan(data)
					}else if(this.message.fineId){
						res=await urls.fineArtreduceZan(data)
					}
					if(res.code==0){
						this.$emit('praise',false)
					}
				}	
				
			},
			async toCollect(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				if(this.message.designId){
					data.designId=this.message.designId
					data.category=1
				}else if(this.message.softId){
					data.softId=this.message.softId
					data.category=2
				}else if(this.message.fineId){
					data.fineId=this.message.fineId
					data.category=3
				}
				data.userId=localStorage.getItem("userId")
				data.state=0
				let res
				if(this.message.collection!=0){
					if(this.message.designId){
						res=await urls.setFabulous(data)
					}else if(this.message.softId){
						res=await urls.softfabulous(data)
					}else if(this.message.fineId){
						res=await urls.fineArtfabulous(data)
					}
					if(res.code==0){
						this.$emit('collect',true)
					}
				}else{
					if(this.message.designId){
						res=await urls.reduceZan(data)
					}else if(this.message.softId){
						res=await urls.softreduceZan(data)
					}else if(this.message.fineId){
						res=await urls.fineArtreduceZan(data)
					}
					if(res.code==0){
						this.$emit('collect',false)
					}
				}	
			},
			toAllComment(){
				if(this.message.designId&&!this.isInAllComment){
					localStorage.setItem("designMessage",JSON.stringify(this.message))
					uni.navigateTo({
						url: '/pages/homeDesign/allComment?id='+this.message.designId+"&state="+1
					})
				}else if(this.message.designId&&this.isInAllComment){
					this.$emit("toRefresh")
				}else if(this.message.softId&&!this.isInAllComment){
					localStorage.setItem("designMessage",JSON.stringify(this.message))
					uni.navigateTo({
						url: '/pages/homeDesign/allComment?id='+this.message.softId+"&state="+2
					})
				}else if(this.message.fineId&&this.isInAllComment){
					this.$emit("toRefresh")
				}else if(this.message.fineId&&!this.isInAllComment){
					localStorage.setItem("designMessage",JSON.stringify(this.message))
					uni.navigateTo({
						url: '/pages/homeDesign/allComment?id='+this.message.fineId+"&state="+3
					})
				}else if(this.message.fineId&&this.isInAllComment){
					this.$emit("toRefresh")
				}
			},
			async toshare(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.userId=localStorage.getItem("userId")
				data.state=3
				let res
				if(this.message.designId){
					data.designId=this.message.designId
					data.category=1
					res=await urls.setFabulous(data)
				}else if(this.message.softId){
					data.softId=this.message.softId
					data.category=2
					res=await urls.softfabulous(data)
				}else if(this.message.fineId){
					data.fineId=this.message.fineId
					data.category=3
					res=await urls.fineArtfabulous(data)
				}
				if(res.code==0){
					
				}
			}
		}
	}
</script>

<style lang="scss">
.productFooter{
	background-color: #FFFFFF;
	height: 98rpx;
	position: fixed;
	bottom: 0;
	width: 750rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	z-index: 1001;
	border-top: 1rpx solid #EEEEEE;
	.input{
		position: relative;
		height: 60rpx;
		input{
			height: 60rpx;
			width: 340rpx;
			background-color: #F6F6F6;
			border-radius: 30rpx;
			font-size: 26rpx;
			letter-spacing: 1rpx;
			padding-left: 71rpx;
		}
		.input_placeholder{
			color: #CACACA;
		}
		.xpl{
			height: 46rpx;
			width: 46rpx;
			position: absolute;
			top: 6rpx;
			left: 18rpx;
			margin: 0;
		}
	}
	.xiaoxi{
		height: 46rpx;
		width: 46rpx;
		margin-left: 30rpx;
		position: relative;
		text{
			display: block;
			height: 30rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			letter-spacing: 1rpx;
			line-height: 30rpx;
			padding:0 4rpx;
			background-color: #C84739;
			border-radius: 15rpx;
			position: absolute;
			z-index: 2;
			bottom: 26rpx;
			left: 27rpx;
		}
		image{
			height: 46rpx;
			width: 46rpx;
			display: block;
			margin: 0;
		}
	}
	image{
		height: 46rpx;
		width: 46rpx;
		margin-left: 46rpx;
	}
}
</style>
